<template>
  <div class="product-list">
    <h2 class="section-title">热门宠物商品</h2>
    <div class="products">
      <div class="product-card" v-for="product in products" :key="product.id">
        <div class="product-content" @click="goToDetail(product.product_id)">
          <img
            :src="product.image_url"
            alt="Product Image"
            class="product-image"
          />
          <h3 class="product-name">{{ product.name }}</h3>
          <div class="product-info">
            <p class="product-price">¥{{ product.price }}</p>
            <div class="product-s">
              <p class="product-sales">销量: {{ product.sales }}+</p>
              <p class="product-stock">库存: {{ product.stock_quantity }}</p>
            </div>
          </div>
        </div>
        <button class="add-to-cart" @click.stop="addToCart(product)">
          加入购物车
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      products: [],
    };
  },
  created() {
    this.loadProducts();
  },
  methods: {
    ...mapMutations(["addToCart"]),
    async loadProducts() {
      try {
        const response = await fetch("/public/product.json");
        const data = await response.json();
        this.products = data.cart.items.map((item) => ({
          ...item,
          image_url: item.image_url,
          id: item.product_id,
        }));
      } catch (error) {
        console.error("加载商品数据失败:", error);
      }
    },
    addToCart(product) {
      this.$store.commit("addToCart", {
        product_id: product.id,
        name: product.name,
        price: product.price,
        stock_quantity: product.stock_quantity,
        image_url: product.image_url,
      });
      alert("商品已添加到购物车");
    },
    goToDetail(productId) {
      this.$router.push(`/product/${productId}`);
    },
  },
};
</script>

<style scoped>
.product-image {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  border-radius: 6px;
  object-fit: cover; /* 确保图片按比例缩放 */
}
.section-title {
  font-size: 25px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #f56c6c;
}
.products {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Adjusted to 5 columns */
  gap: 20px;
}
.product-name {
  color: grey;
}
.product-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.product-price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 20px;
}
.product-s {
  color: grey;
  font-size: 15px;
}
.product-stock {
  margin: 0;
}
.product-sales {
  margin: 0;
}
.add-to-cart {
  width: 100%;
  padding: 8px;
  background-color: #d9c596;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.add-to-cart:hover {
  background-color: #f4efd2;
}
</style>
